<template>
  <div class="con-left fl">
    <el-carousel :autoplay="false" :indicator-position="false" :loop="true" arrow="never" ref="carousel"
      v-if="selfAdaption">
      <el-carousel-item v-for="(item, index) in ListByProdect" :key="index" @change="handleParkOverview">
        <div class="left-top" v-show="show_left">
          <div class="top-bottom">
            <div class="info-title">
              <!-- <img src="../../assets/img/left@2x.png" class="left_right_icon" /> -->
              <dv-decoration3 v-if="recentElectricityShow" style="width:100px;height:30px;" />
              <div class="titleName" @click="handleParkOverview(index)">
                <span v-if="item.areaModel">
                  {{ item.areaModel.areaName }}</span>
              </div>
              <!-- <img
                src="../../assets/img/right@2x.png"
                class="left_right_icon"
              /> -->
              <dv-decoration3 v-if="recentElectricityShow" style="width:100px;height:30px;" />
            </div>
            <!-- <dv-border-box1 ref="borderRef" v-if="recentElectricityShow"> -->

            <div class="info1 display_flex3 space-around">
              <div class="display_flex3 column align-items justify-content-center width50">
                <div class="top_icon">
                  <p v-if="item.pseudoDataDTO && item.pseudoDataDTO.pseudoData">
                    {{ item.pseudoDataDTO.pseudoData.days || 0 }}
                  </p>
                  <p v-else>0</p>
                </div>
                <div class="cicle1"></div>
                <div class="cicleName">已安全用电(天)</div>
              </div>
              <div class=" display_flex3  column   align-items  justify-content-center  width50 ">
                <div class="top_icon">
                  <p v-if="item.pseudoDataDTO && item.pseudoDataDTO.pseudoData">
                    {{ item.pseudoDataDTO.pseudoData.garden_nodeNumber || 0 }}
                  </p>
                  <p v-else>0</p>
                </div>
                <div class="cicle1"></div>
                <div class="cicleName">在线节点数(个)</div>
              </div>
              <div v-if="isgarden == 1" class="display_flex3   column  align-items justify-content-center width50">
                <div class="top_icon">
                  <p v-if="item.pseudoDataDTO && item.pseudoDataDTO.pseudoData">
                    {{ item.pseudoDataDTO.pseudoData.garden_energy_total || 0 }}
                  </p>
                  <p v-else>0</p>
                </div>
                <div class="cicle1"></div>
                <div class="cicleName">累计能耗(kwh)</div>
              </div>
            </div>

            <!-- </dv-border-box1> -->

          </div>
          <scene-Echarts :pseudoData="item.pseudoDataDTO" v-if="recentElectricityShow"></scene-Echarts>
          <!-- <div class="info">
            <div class="info-title">
              <img src="../../assets/img/left@2x.png" class="left_right_icon" />
              <div class="titleName">场景能耗</div>
              <img
                src="../../assets/img/right@2x.png"
                class="left_right_icon"
              />
            </div>
            <scene-Echarts
              :pseudoData="item.pseudoDataDTO"
              v-if="recentElectricityShow"
            ></scene-Echarts>
          </div> -->
        </div>
        <div :class="isgarden != 1 ? 'left-bottom' : 'left-bottom1'" v-show="show_left">
          <div class="info-title">
            <img src="../../assets/img/left@2x.png" class="left_right_icon" />
            <div class="titleName">近一个月用电量</div>
            <img src="../../assets/img/right@2x.png" class="left_right_icon" />
          </div>
          <div class="info1">
            <!-- <div class="electro-charts">
              <div
                :id="item.recentElectricityId"
                v-if="recentElectricityShow"
                class="charts"
                style="width: 100%; height: 98%; padding-top: 2%"
              ></div>
            </div> -->
            <recentElectricity-Echarts style="width: 100%; height: 100%"
              v-if="recentElectricityShow"></recentElectricity-Echarts>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <img v-if="isgarden == 1" src="../../assets/img/hideIcon.png" :class="show_left ? 'hideIcon' : 'hideIcon1'"
      @click="handleHide" />
  </div>
</template>
<script>
import axios from "axios";
import { ref, reactive, onMounted, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import parsing from "../../assets/js/parsing";
import { getlListByProdectId } from "../../assets/js/dictionaries";
import recentElectricityEcharts from "./recentElectricityEcharts.vue";
import sceneEcharts from "./sceneEcharts.vue";
import * as echarts from "echarts";
import api from "../../api/api";
let projectId = Number(localStorage.getItem("projectId"));
export default {
  components: { recentElectricityEcharts, sceneEcharts },
  setup(props, conts) {
    const isgarden = ref(conts.attrs.isgarden);
    const show_left = ref(true);
    const carousel = ref(null);
    const energyConsumptionShow = ref(true);
    const recentElectricityShow = ref(true);
    const selfAdaption = ref(true);
    // if (isgarden.value == 1) {
    //   console.log(document.getElementsByClassName("con-left")[0]);
    //   let byClass = document.getElementsByClassName("con-left")[0].style;
    //   byClass.position = "fixed";
    //   byClass.zIndex = "999";
    //   byClass.left = "0";
    //   byClass.top = "70px";
    //   byClass.width = "30%";
    // }
    const getelectro = () => {
      recentElectricityShow.value = false;
      selfAdaption.value = true;
      api
        .postFormAPI("backup/electricityDataInfo/initHomePower", {
          devId: "84167",
          dateType: "month",
        })
        .then((res) => {
          if (res.data.code == 1) {
            let electrodata = res.data.data;
            console.log(electrodata);
            nextTick(function () {
              recentElectricityShow.value = true;
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    const detail = ref({});
    const ListByProdect = ref([{}]);
    const getDetail = () => {
      // 初始化
      getlListByProdectId().then((res) => {
        energyConsumptionShow.value = true;
        for (var i = 0; i < res.length; i++) {
          if (res[i].pseudoDataDTO && res[i].pseudoDataDTO.pseudoData) {
            if (typeof res[i].pseudoDataDTO.pseudoData == "string") {
              res[i].pseudoDataDTO.pseudoData = JSON.parse(
                res[i].pseudoDataDTO.pseudoData
              );
            }
            res[i].pseudoDataDTO.pseudoData.days = parseInt(
              parsing.getDaysBetween(
                res[i].pseudoDataDTO.pseudoData.garden_data,
                parsing.getNowTime()
              )
            );
          }
        }
        ListByProdect.value = res;
        getelectro();
      });
    };
    getDetail();
    onMounted(async () => {
      window.addEventListener("resize", function () {
        selfAdaption.value = false;
        getDetail();
      });
    });
    const handleHide = () => {
      show_left.value = !show_left.value;
    };
    const handleParkOverview = (index) => {
      recentElectricityShow.value = false;
      nextTick(function () {
        recentElectricityShow.value = true;
      });
      conts.emit("handleParkOverview", carousel.value);
    };
    const getCarousel = () => {
      carousel.value.next();
    };
    return {
      detail,
      isgarden,
      show_left,
      ListByProdect,
      carousel,
      selfAdaption,
      energyConsumptionShow,
      recentElectricityShow,
      getCarousel,
      handleHide,
      handleParkOverview,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/common.css";
@import "../../assets/css/geoMap.css";
@import "../../assets/css/style.css";
@import "../../assets/css/home.less";

.cicleName {
  position: relative;
  bottom: 20px;
  color: #fff;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #b8d3f1;
  line-height: 34px;
}

// .electro-charts {
//   position: relative;
//   // bottom: 20px;
//   width: 95%;
//   height: 100%;
// }
.hideIcon {
  width: 23px;
  height: 40px;
  left: 27.5%;
  position: fixed;
  bottom: 49%;
  z-index: 999;
}

.hideIcon2 {
  width: 23px;
  height: 40px;
  left: 31.5%;
  position: fixed;
  bottom: 49%;
  z-index: 999;
}

.hideIcon1 {
  width: 23px;
  height: 40px;
  left: 1.5%;
  position: fixed;
  bottom: 49%;
  z-index: 999;
}

&:deep(.data > .data-content > .con-left) {
  transform: translateX(-80px);
  transition: transform 13s;
}

&:deep(.el-carousel__indicators--horizontal) {
  display: none;
}

&:deep(.el-carousel__container) {
  height: 100%;
  width: 100%;
}

&:deep(.el-carousel--horizontal) {
  height: 100%;
  width: 100%;
}

.left-top {
  width: 100%;
  height: calc(66.5% - 20px);
  margin-bottom: 20px;
  position: relative;
}

.left-top>.info {
  height: 48%;
  width: 100%;
  /* background-color: rgba(0, 22, 142, 0.5); */
  /* border: 1px solid #02a7ff; */
  /*border-radius: 4px;*/
  box-sizing: border-box;
  position: relative;
  padding: 0 !important;
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: space-between; */
  top: 20px;
}

.left-top>.info>.info-main {
  width: 100%;
  height: 80%;
}

.left-top>.info>.info-main>div {
  width: 275px;
  height: 25%;
  background: url("../img/info-text.png") no-repeat;
  margin: 8px auto;
}

.left-top>.info>.info-main .info-img {
  width: 100px;
  height: 60px;
  position: relative;
}

.left-top>.info>.info-main .info-img>img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -24px;
  margin-top: -24px;
}

.left-top>.info>.info-main .info-text {
  width: 175px;
  height: 70px;
  padding-left: 30px;
  padding-top: 16px;
  box-sizing: border-box;
}

.left-top>.info>.info-main .info-text>p:nth-child(1) {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.left-top>.info>.info-main>.info-1>.info-text>p:nth-child(2) {
  font-weight: 600;
  color: #ffff44;
  font-size: 22px;
}

.left-top>.info>.info-main>.info-2>.info-text>p:nth-child(2) {
  font-weight: 600;
  color: #25f3e6;
  font-size: 22px;
}

.left-top>.info>.info-main>.info-3>.info-text>p:nth-child(2) {
  font-weight: 600;
  color: #f84a4a;
  font-size: 22px;
}

.left-top>.info>.info-main>.info-4>.info-text>p:nth-child(2) {
  font-weight: 600;
  color: #f5c847;
  font-size: 22px;
}

.left-top>.top-bottom {
  height: calc(49% - 10px);
  width: 100%;
  /* background-color: rgba(0, 22, 142, 0.5); */
  /* border: 1px solid #02a7ff; */
  /* margin-top: 20px; */
  box-sizing: border-box;
  position: relative;
  /* padding: 10px; */
  top: 20px;
}

.left-bottom {
  width: 100%;
  height: 32.5%;
  /* background-color: rgba(0, 22, 142, 0.5); */
  /* border: 1px solid #02a7ff; */
  box-sizing: border-box;
  position: relative;
}

.left-bottom1 {
  width: 100%;
  height: 27%;
  /* background-color: rgba(0, 22, 142, 0.5); */
  /* border: 1px solid #02a7ff; */
  box-sizing: border-box;
  position: relative;
}

.left-top>.top-bottom>.info1,
.left-top>.top-bottom>.info1,
.left-bottom1>.info1,
.left-bottom>.info1,
.left-bottom1>.info1 {
  background: url(../../assets/img/model_backg.png) no-repeat;
  background-size: 100% 100%;
  height: calc(100% - 30px);
  /* height: 100%; */
}

.dv-border-box-1 {
  height: 90%;
}
</style>
